<template>
  <div>
    <div class="card">
      <el-form :model="searchForm" label-width="80px"  size="mini" inline>
        <my-form-item label="开始时间">
          <el-date-picker
            type="date"
            v-model="searchForm.startTime"
            @change="startTimeChange"
            placeholder="请输入开始时间"
            size="mini"
          ></el-date-picker>
        </my-form-item>

        <my-form-item label="截止时间">
          <el-date-picker
            type="date"
            v-model="searchForm.endTime"
            :picker-options="expireTimeOption"
            placeholder="请输入截止时间"
            size="mini"
          ></el-date-picker>
        </my-form-item>
        <my-form-item>
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getList">查询</el-button>
        </my-form-item>
      </el-form>
    </div>
    <el-card class="ep-card" style="height: calc(100vh - 190px);">
      <el-row style="margin-top: 10px;">
        <el-table
          :data="tableData"
          border
          :height="height"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" align="center" width="50"></el-table-column> -->
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="defName" align="center" label="流程名称" min-width="400">
     
          </el-table-column>
          <el-table-column prop="nodeName" align="center" label="当前环节" min-width="180">
          </el-table-column>
          <el-table-column
            prop="startTime"
            align="center"
            min-width="180"
            label="开始时间"
            type="date"
            :formatter="dateFormat"
          ></el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="240" fixed="right">
            <template slot-scope="scope">
              <el-button type="info" size="mini" @click="progress(scope.row)">进展</el-button>
              <el-button type="success" size="mini" @click="edit(scope.row)">处理</el-button>
              <!-- <el-button
                type="danger"
                size="mini"
                icon="el-icon-edit"
                @click="consign(scope.row)"
                v-if="scope.row.isConsign=='1'"
              >委托</el-button>
              <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="mini"
                @click="consign(scope.row)"
                v-else
              >委托</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align:right"
          v-show="tableData.length > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.page"
          background
          :page-sizes="[20, 40, 60, 80]"
          :page-size="pager.size"
          layout="total, sizes, prev, pager, next"
          :total="pager.total"
        ></el-pagination>
      </el-row>
    </el-card>
    <el-dialog title="委托处理" width="300px" :visible.sync="dialogFormVisible" :before-close="handleFormClose">
      <el-form size="mini" :model="tasklog" label-width="80px">
        <my-form-item label="委托人" >
          <el-select v-model="tasklog.consignUser" filterable placeholder="请选择">
            <el-option label="请选择" value></el-option>
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
              v-if="item.id!=user.id"
            ></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="是否委托">
          <el-switch
            v-model="useable"
            @change="stateChange"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </my-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleFormClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="doSave">保 存</el-button>
      </div>
    </el-dialog>
     <el-dialog title="流程进展"  :visible.sync="jinzdialogVisible" >

          <img :src="imgSrc" />

     </el-dialog> 
  </div>
</template>
<script>
  export default {
    name: "Index",
    data() {
        return {
          imgSrc:'',
          jinzdialogVisible:false,
            users:[],
            useable: true,
            targetPerson:[],
            tasklog:{
                isConsign:'1',
            },
            dialogFormVisible:false,
            searchForm: {
                startTime: '',
                endTime: '',
            },
            tableData: [],
            pager: {
                page: 0,
                size: 20,
                total: 0
            },
            dialogTitle: '任务',
            entityId: '',
            expireTimeOption: this.checkApplyDate(), //entityForm,
            tasklogs:[],
            user:{},
        }
    },
    computed: {
        height() {
            return `calc(100vh - 260px)`;
        }
    },
    mounted() {
        this.user=JSON.parse(sessionStorage.getItem("user"));
        this.getusers();
        this.getList();
    },
    methods: {
        dateFormat:function(row,column){

        return this.formatDate(row.startTime,"yyyy-MM-dd HH:mm:ss")

    },

        // 修改
        edit: function (item) {
            //this.menuList = [];
            // let path = '/proj/roadShowConference';
            let path="";

            if(item.router != null){
              path = item.router;
            }
            let title = '处理任务';
            this.$router.push({
                path: path,
                query: { id: item.id,businessId:item.businessId,instId:item.instId ,taskName:item.nodeName}
            });
          /*
        this.menuList.push({
            title: title,
            path: path
        });
      this.$store.dispatch('SET_CLOSE', false);
        sessionStorage.setItem('menuList', window.Qs.stringify(this.menuList));
        this.$store.dispatch('SET_MENU', this.utils.unique(this.menuList, this.menu));*/

        },
        // 获取任务列表
        getList: function () {
            let user = JSON.parse(sessionStorage.getItem("user"));
            let params = {
                page: this.pager.page === 0 ? this.pager.page : this.pager.page - 1,
                size: this.pager.size,
                userId:user.id,
                roleIds:user.sysRoleIds 
            };
            if(this.searchForm.startTime){
                params.startTime=this.searchForm.startTime
            }
            if(this.searchForm.endTime){
                params.endTime=this.searchForm.endTime
            }
            // this.$api.formPost(  '/wf/taskLog/todoWork', params).then(res => {
            //     if (res.retHead && res.retHead.code === '0000000') {
            //         console.log(res);
            //         this.tableData = res.retBody.resContent;
            //         this.pager.total = res.retBody.total;
            //     }
            // });
            this.$api.formPost('/api/flowact/ruTask/doGetMyTaskList', params).then(res => {
                if (res.retHead.code == '0000000') {
                  
                     this.tableData = res.retBody.list;
                     this.pager.total = res.retBody.total;
                }
            });
        },
        startTimeChange() {
            this.searchForm.endTime = '';
        },

        checkApplyDate: function () {
            let self = this;
            return {
                disabledDate(date) {

                    if (self.searchForm.startTime != '') {
                        let t1 = new Date(self.searchForm.startTime).getTime();

                        return date.getTime() <= t1;
                    }


                }
            };
        },
        dateFormatter(row){
           return this.formatDate(row.beginTime,"yyyy-MM-dd HH:mm:ss");
        },
      handleSizeChange(val) {
        this.pager.size = val;
      },
      handleCurrentChange(val) {
        this.pager.page = val;
      },
      //委托
      consign(row){ 
        this.tasklog=JSON.parse(JSON.stringify(row)) ;
        if(row.isConsign){
            this.tasklog.isConsign=row.isConsign;
            if(row.isConsign=='0'){
                this.useable=false;
            }
        }else{
            this.tasklog.isConsign='1';
        }
        
        this.dialogFormVisible=true;
      },

      // 关闭弹窗
      handleFormClose: function () {
        this.tasklog={};  
        this.dialogFormVisible=false;
      },
      //选择委托人
      selectConsignPerson: function (data) {
        if(data.length > 0){
          this.tasklog.consignUser = data[0].value;
        }

      },
      getusers() {
        let params = {};
        this.$api
          .formPost(  "/api/auth/sysuser/doGetList", params)
          .then(res => {
            if (res.retHead.code == "0000000") {
              this.users = res.retBody.list;
            }
          });
      },
      stateChange: function (val) {
        this.tasklog.isConsign = val == true ? "1" : "0";
      },
      doSave(){
         
        this.$api
          .post(  "/api/biz/flowMyWork/saveTaskLog", this.tasklog)
          .then(res => {
            if (res.retHead.code === '0000000') {
              if(res.retBody.status==="0"){
                this.handleFormClose();
                this.getList();
              }else{
                this.$message({
                  type: "error",
                  message: res.retBody.message
                });
              }
                
            }else{
              this.$message({
                type: "error",
                message: res.retHead.message
              });
            }
          });
      },
      //选择复选框事件
      handleSelectionChange(val) {
        this.tasklogs = val;
      },
      //查看进展
      progress(item){
        this.jinzdialogVisible=true;
        let params = {
        processInstanceId: item.instId,
      }
      this.$api
        .formPost("/api/flowact/commTaskassignee/findPicture", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.imgSrc = "data:image/png;base64," + res.retBody;
          } else {
            this.$message({
              message: res.retHead.message,
              type: "error"
            });
          }
        });
      },
    }
}


</script>
<style lang='scss' scoped>
.el-table {
  width: 99.9% !important;
}
</style>
